<script setup lang="ts">
import {ref}from 'vue'
import _ from 'lodash'

const flag=ref(true)
function toogleDiv(type:boolean){
flag.value=type
}

const list=ref(Array.apply(null,{length:80}as number[ ]).map((_,index)=>{
  return {
    index:Math.random()*10000,
    number:index%9+1
  }
}))


function shuffleBtn(){
  list.value= _.shuffle(list.value)
}
</script>

<template>
<div>
  <el-button type="primary" @click="toogleDiv(true)">toogleDiv</el-button>
  <el-button type="primary" @click="toogleDiv(false)">toogleDiv</el-button>
  <transition name="fade" tag="div">
    <div v-if="flag" :style="{width:'200px',height:'200px',background:'pink'}">我是内容</div>
  </transition>

  <el-button @click="shuffleBtn()">点我乱序</el-button>
  <transition-group name="fade" tag="ul" move-class="move-out-of-order">
      <!--    不能使用index-->
     <li  class="text-center" v-for="item in list" :key="item.index">{{item.number}}</li>
  </transition-group>
</div>
</template>

<style scoped lang="scss">
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/

.fade-enter-from{
  opacity: 0;
  transition: all 0.3s ease-out;
  transform: scale(1.2);
}
.fade-enter-active {
  transition: all 0.3s ease-out;
  transform: scale(2.2);
}
.fade-enter-to {
  transition: all 0.3s ease-out;
  transform: scale(3.2);
}

.fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  width:0;
  transform: translateX(20px);
  opacity: 0;
}
ul{
  width:50%;
  display: flex;
  flex-wrap: wrap;

}
li{
  width: calc(100% / 11);
  //width:30px;
  height:30px;
  line-height: 30px;
  border:1px solid #ccc;
  list-style: none;
}
.move-out-of-order{
  transition:all 1s;
}
</style>
